import React from 'react'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import {withRouter,} from "react-router-dom"
import './set-pro-detail.css'
import defaultAvatarSrc from '../../res/images/web/pro_apply/专家头像@2x.png'
import cameraSrc from '../../res/images/web/pro_apply/camera@2x.png'
import FormInput from "../../shared-components/FormInput/FormInput";
import CustomButton from "../../shared-components/CustomButton/CustomBotton";
import LocalStorageService from "../../utils/LocalStorageService";
import {getPlanProDetailReq, getUserDetailReq, setPlanProDetailReq} from "../../apis/goApis";
import UploadAvatarModal from "../userInfo/componets/InfoMain/UploadAvatarModal";
import UploadImage from "../../utils/image";
import {Modal, Toast} from "antd-mobile";
import constants from "../../utils/constants";

class SetProDetail extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.state = {
            avatarSrc: '',
            avatar: null,
            nickname: '',
            goodAtType: '',
            goodAtEvent: '',
            txt: '',
            modal: {
                avatar: false,
                goodAtType: false,
            },
        }
    }

    componentDidMount() {
        this.getUserDetail()
    }

    getUserDetail() {

        getUserDetailReq({
            uid: this.uid,
        }, true)
            .then((resp) => {
                let user = resp.data.ok
                let [goodAtType, goodAtEvent,] = user.Goodat || ['', '',]
                if (user) {
                    this.setState({
                        avatarSrc: user.Iconurl,
                        nickname: user.Nickname,
                        goodAtType: goodAtType ? goodAtType : '',
                        goodAtEvent: goodAtEvent ? goodAtEvent : '',
                        txt: user.Specialisttxt,
                    })
                }
            })
    }

    controlModal = (key, value) => {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: value,
            }
        })
    }

    onFileChange = (file) => {
        this.setState({
            avatarFile: file,
        })
        new UploadImage(file)
            .changeFileToBaseURL(file)
            .then(base64 => {
                this.setState({
                    avatarSrc: base64,
                    avatar: file,
                })
            })
    }

    setProDetail = () => {
        // Uid      string
        // Iconurl  string //用户头像url，换头像传"avatar"
        // Nickname string //用户昵称
        // Gl       string //擅长类型
        // Gs       string //擅长赛事
        // Txt      string //专家自我介绍
        const goodAtEvent = this.state.goodAtEvent
        const txt = this.state.txt
        const avatar = this.state.avatar
        const src = this.state.avatarSrc
        const nickname = this.state.nickname
        const goodAtType = this.state.goodAtType

        if (nickname.length === 0) {
            Toast.fail('请填写昵称', 1)
            return
        }

        if (goodAtType.length === 0) {
            Toast.fail('擅长类型', 1)
            return
        }

        if (src === '') {
            const btnList = [
                { text: <span>取消</span>, onPress: () => {}},
                {
                    text: <span style={{color: '#FFA500'}}>现在设置</span>,
                    onPress: () => {
                        this.controlModal('avatar', true,)
                    },
                },
                // {}
            ]
            Modal.alert('亲爱的用户，专家申请必须设置头像哦～', '', btnList)
        } else {
            let params = {
                Uid: this.uid,
                Iconurl: avatar ? 'avatar' : src,
                Nickname: nickname,
                Gl: goodAtType,
            }


            if (goodAtEvent) {
                params.Gs = goodAtEvent
            }
            if (txt) {
                params.Txt = txt
            }
            if (avatar) {
                params.avatar = avatar
            }
            let fm = new FormData()
            Object.entries(params).map(([key, value]) => {
                fm.append(key, value)
            })
            setPlanProDetailReq(fm)
                .then((resp) => {
                    if (resp.data.ok === 1) {
                        Toast.success('修改成功', 1)
                    }
                })
        }

    }

    render() {

        const avatarSrc = this.state.avatarSrc
        const inputContainerStyle = {
            padding: '0 48px',
            marginBottom: '24px',
            position: 'relative',
        }

        const mustSymbol = <span
            style={{
                fontSize: '18px',
                fontWeight: '400',
                color: '#FA7268',
                lineHeight: '25px',
                position: 'absolute',
                left: '40px',
                top: '50%',
                transform: 'translateY(-50%)',
            }}
        >*</span>

        return <>
            <div
                className='fixed-full-container'
                style={{
                    background: '#fff',
                    overflow: 'scroll',
                }}
            >
                <UploadAvatarModal
                    visible={this.state.modal.avatar}
                    onClose={() => this.controlModal('avatar', false,)}
                    onFileChange={(file) => this.onFileChange(file)}
                />
                <Modal
                    popup
                    animationType="slide-up"
                    visible={this.state.modal.goodAtType}
                    onClose={() => this.controlModal('goodAtType', false,)}
                >
                    <div
                        style={{
                            background: '#F8F8F8',
                            padding: '10px 0'
                        }}
                    >
                        <p>请选择擅长赛事</p>
                    </div>
                    <div>
                        {['亚指', '欧指', '总进球',].map(odd => {
                            return <div
                                key={odd}
                                style={{
                                    width: '100%',
                                    textAlign: 'center',
                                    padding: '16px 0',
                                    borderBottom: '1px solid #F8F8F8',
                                }}
                                onClick={() => {
                                    this.setState({
                                        goodAtType: odd,
                                        modal: {
                                            ...this.state.modal,
                                            goodAtType: false,
                                        }
                                    })
                                }}
                            >
                                <p
                                    style={{
                                        fontSize: '16px',
                                        color: '#333333',
                                        lineHeight: '22px',
                                    }}
                                >{odd}</p>
                            </div>
                        })}
                        <div className='pd-16-px'>
                            <CustomButton
                                bg='#F8F8F8'
                                color='#333'
                                onClick={() => this.controlModal('goodAtType', false)}
                            >
                                取消
                            </CustomButton>
                        </div>
                    </div>
                </Modal>
                <GoBackLayout
                    history={this.props.history}
                >
                    <div
                        style={{position: 'relative', textAlign: 'center', padding: '12px', marginBottom: '12px',}}
                        onClick={() => this.controlModal('avatar', true,)}
                    >
                        <img
                            src={avatarSrc ? avatarSrc : defaultAvatarSrc}
                            style={{
                                width: 88,
                                height: 88,
                                borderRadius: '50%',
                            }}
                            alt=''
                        />
                        <img
                            src={cameraSrc}
                            style={{
                                position: 'absolute',
                                width: 16,
                                height: 16,
                                bottom: 12,
                                left: '50%',
                                transform: 'translateX(19px)'
                            }}
                            alt=''
                        />
                    </div>
                    <div>
                        <div style={inputContainerStyle}>
                            <FormInput
                                type='text'
                                placeholder='昵称'
                                value={this.state.nickname}
                                onChange={(e) => this.setState({nickname: e.target.value,})}
                            />
                            {mustSymbol}
                        </div>

                        <div style={inputContainerStyle}>
                            <FormInput
                                value={this.state.goodAtType}
                                readOnly
                                type='text'
                                placeholder='擅长类型'
                                onPress={() => this.controlModal('goodAtType', true)}
                            />
                            {mustSymbol}
                        </div>

                        <div style={inputContainerStyle}>
                            <FormInput
                                type='text'
                                placeholder='擅长赛事'
                                value={this.state.goodAtEvent}
                                onChange={(e) => this.setState({goodAtEvent: e.target.value,})}
                            />
                        </div>

                        <div style={inputContainerStyle}>
                        <textarea
                            maxLength={50}
                            style={{
                                boxSizing: 'border-box',
                                width: '100%',
                                height: '100px',
                                background: '#F3F3F3',
                                padding: '12px 16px',
                            }}
                            placeholder='介绍一下自己吧…'
                            value={this.state.txt}
                            onChange={e => this.setState({txt: e.target.value,})}
                        />
                        </div>

                        <div className='pd-12'>
                            <CustomButton
                                onClick={() => {
                                    this.setProDetail()
                                }}
                            >
                                保存
                            </CustomButton>
                        </div>

                    </div>
                </GoBackLayout>

            </div>
        </>

    }

}

export default withRouter(SetProDetail)